{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/animate.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/mui.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/public.css' %}"/>
    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static 'js/jquery.cookie.js' %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static 'js/mui.min.js' %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static 'js/index.js' %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static 'layer/mobile/layer.js' %}" type="text/javascript" charset="utf-8"></script>
</head>
<body style="background: url({% static 'img/loginBackground.jpg' %}) no-repeat; background-size: cover;">
	<div class="logoBox"></div>
	<div class="loginBox">
		<div class="loginInput">
			<img src="{% static 'img/userId.png' %}" class="boxIcon"/>
			<p class="boxTitle">手机号:</p>
			<input type="text" name="phone" class="boxInput"/>
		</div>
		<div class="loginInput" style="margin-top: 0.1rem;">
			<img src="{% static 'img/pwd.png' %}" class="boxIcon"/>
			<p class="boxTitle">密码:</p>
			<input type="password" name="password" class="boxInput"/>
		</div>
		<div class="loginBtn">登录</div>
		<p class="tips" id="fpwd">忘记密码？</p>
		<p class="tips" id="reg">注册</p>
	</div>
</body>
<script type="text/javascript">
	$(function() {
		$('#fpwd').click(function () {
			window.location.href = "/forgetPwd/"
		})
        $('#reg').click(function () {
			window.location.href = "/reg/"
		})
	})
    function checkMobile(tel) {
		var reg = /(^1[3|4|5|6|7|8|9][0-9]{9}$)/;
		if (reg.test(tel)) {
			return true;
		}else{
			return false;
		};
	}
    $(".loginBtn").click(function(){
		var phone=$("input[name='phone']").val();
		var password = $('input[name=password]').val();
		if(phone == ''){
			layer.open({
				content: '请输入手机号'
				,skin: 'msg'
				,time: 2 //2秒后自动关闭
			});
			return false;
		}
		if (!checkMobile(phone)) {
			layer.open({
				content: '手机号格式不正确'
				,skin: 'msg'
				,time: 2 //2秒后自动关闭
			});
			return false;
		}
		if(password == ''){
			layer.open({
				content: '请输入密码'
				,skin: 'msg'
				,time: 2 //2秒后自动关闭
			});
			return false;
		}
		$.ajax({
			type : "POST",
			url:"/login/",
            headers:{"X-CSRFToken":$.cookie('csrftoken')},
			data:{'phone':phone,'password':password}, 
			dataType:'json',		
			success: function(data){
			//    <!-- alert(data.user_list); -->
               if(data.code == 1){
					layer.open({
						content: data.msg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					setTimeout(function(){
						window.location.href="/index/"
					},700);
				}else{
					layer.open({
						content: data.msg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
				}	
			}
		});
	});
</script>
</html>